<template>
  <div class="computerThree" id="container8">

  </div>
</template>

<script>
  import echarts from "echarts";
  import chartmixins from "../../chartmixins.js";

  export default {
    name: "computer-three",
    mixins: [chartmixins],
    mounted() {
      this.equipment1()
    },
    methods: {
      equipment1() {
        var dom = document.getElementById("container8");
        var myChart = echarts.init(dom, "dark");
        var builderJson = {
          "all": 100,
          "charts": {
            "温度": 95,
            "湿度": 90,
            "UPS": 93,
            "空调": 95,
            "配电": 91,
          }
        };
        let option = null;
        option = {
          backgroundColor: "#0000",
          grid: {
            left: '10%',
            top: '5%',
            bottom: '0%',
            right:'10%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            max: 100,
            //x轴线及文字都取消
            show: false,
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#ffffff',
                //x轴线取消
                width: 0
              }
            },
            //轴线刻度是否显示
            axisTick: {
              show: false
            }

          },
          yAxis: {
            type: 'category',
            data: Object.keys(builderJson.charts),
            axisLabel: {
              //设置文字倾斜
              // interval: 0,
              // rotate: 30
              color: '#ffffff',
              fontStyle: 'normal',
              fontWeight: 'normal',
              fontFamily: 'sans-serif',
              fontSize: 15,
            },
            axisLine: {
              lineStyle: {
                color: '#ffffff',
                //y轴线取消
                width: 0
              }
            },
            //轴线刻度是否显示
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          series: [{
            type: 'bar',
            stack: 'chart',
            z: 3,
            // barWidth:20,
            // 类目间柱形距离，默认为类目间距的20%，可设固定值
            barCategoryGap: 60,
            itemStyle: {
              normal: {
                color: '#0a96df',
                barBorderRadius:[5,0, 0, 5]
              }
            },
            label: {
              normal: {
                color: '#ffffff',
                position: 'inside',
                show: true
              }
            },
            data: Object.keys(builderJson.charts).map(function (key) {
              return builderJson.charts[key];
            })
          }, {
            type: 'bar',
            stack: 'chart',
            barWidth: 15,
            silent: true,
            itemStyle: {
              normal: {
                color: '#3358A9',
                barBorderRadius:[0,5,5,0]
              }
            },
            data: Object.keys(builderJson.charts).map(function (key) {
              return builderJson.all - builderJson.charts[key];
            })
          }]
        };
        myChart.setOption(option, true);
        this.myChart = myChart;
        window.addEventListener("resize", () => {
          this.myChart.resize();
        });
      },

    }
  }
</script>

<style lang='scss' scoped>
  .computerThree {
    padding:0px 15px 20px 15px;
    width: 100%;
    height: 100%;
    color: #ffffff;
    display: flex;
    .container8 {
      width: 100vh;
      height: 100vh;
    }
  }
</style>
